<template>
    <div class="mainCenter">
        <div class="title">楼层管理</div>
        <div class="mainCenterBox">
            <div class="searchBox" style="margin-bottom: 20px;">
                <div class="addInfo">
                    <el-button type="danger"><el-icon>
                            <Delete />
                    </el-icon>批量操作</el-button>
                    <el-button type="primary" @click="addFloor"><el-icon>
                            <Plus />
                        </el-icon>添加楼层</el-button>
                </div>
            </div>
            <el-table style="width: 100%" stripe border :data="floorData.floorList">
                <el-table-column label="楼层编号" prop="fid" />
                <el-table-column align="center" prop="borrowid" label="楼层图片" >
                    <template #default="scope" >
                        <div class="bookImage" style="width: 158px;height: 70px;overflow: hidden;margin: 0 auto;">
                            <img :src="scope.row.floorimage" alt="" style="width: 100%;height: 100%;">
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="floor" label="楼层名字" />
                <el-table-column prop="remark" label="楼层描述" />
                <el-table-column prop="typeList.type" label="图书类型">
                    <template #default="scope">
                        <template v-for="(type,index) in scope.row.type" key="type.typeid">
                                 <span class="typeTag">{{ type.type }}</span>
                        </template>
                    </template>
                </el-table-column>
                <el-table-column prop="seatCount" label="个位总数" />
                <el-table-column  label="操作">
                    <template #default="scope">
                        <el-button type="primary" plain size="small" @click="editFloor(scope.$index,scope.row)"><el-icon>
                                <EditPen />
                            </el-icon>编辑</el-button>
                        <el-button type="danger" plain size="small" @click="deleteFloor(scope.$index,scope.row)"><el-icon>
                                <Delete />
                            </el-icon>删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-drawer v-model="isChange" :title="'图书操作'" direction="btt" size="500">
            <EditFloor :FloorOne="floorData.floorOne" @emitAdd="addData" @emitChange="changeData"></EditFloor>
        </el-drawer>
    </div>
</template>

<script setup lang="ts">
import EditFloor from './componets/EditFLoor.vue'
import { reqDeleteFloor, reqGetFloorList } from '@/api/common';
import { onMounted, reactive,ref,watch } from 'vue';
import { FloorType } from '@/types/floor';
import { elementConfirm, tip } from '@/utils/alert';
const isChange=ref<boolean>(true)
const floorData=reactive<{floorList:FloorType[],floorOne:FloorType|null,index:number}>({
    floorList:[],
    floorOne:null,
    index:-1
})
const getFloor=()=>{
    reqGetFloorList().then(res=>{
        console.log(res);
        floorData.floorList=res.data.data
    })
}

watch(()=>isChange.value,()=>{
    if(isChange.value==false){
        floorData.floorOne=null
        console.log(floorData.floorOne);
    }
})


const addData=(value:any)=>{
    floorData.floorList.push(value.info)
    isChange.value=false
}

const changeData=(value:any)=>{
    floorData.floorList[floorData.index]=value.info
    isChange.value=false
}

const addFloor=()=>{
    isChange.value=true
    floorData.floorOne=null
}
const editFloor=(idx:number,info:FloorType)=>{
    isChange.value=true
    floorData.index=idx,
    floorData.floorOne=info
}

const deleteFloor=(idx:number,info:FloorType)=>{
    elementConfirm().then(()=>{
        reqDeleteFloor(info).then(res=>{
            tip(res.data.info,'success')
            getFloor()
        })
    })
}

onMounted(()=>{
    isChange.value=false
    getFloor()
})
</script>

<style scoped lang="scss">
.typeTag{
    display: inline-block;
    box-sizing: border-box;
    padding: 5px;
    background-color: #dbdbdb;
    border-radius: 5px;
    margin: 5px;

}
:deep(.el-drawer) {
    border-radius: 5px;
    width: 800px;
    position: absolute;
    left: 50%;
    margin-left: -400px;
    top: 50%;
    margin-top: -250px;
    display: flex;
    justify-content: center;

}

:deep(.el-drawer__header) {
    margin-bottom: 12px;
    ;
}
:deep(.el-drawer__body){
    display: flex;
    justify-content: center;
}
</style>